<template>
	<div class="check-members">
		<nav-header>
			<template slot="menuBefore">
				<li><router-link to="/teaching/group/circle-group" tag="a">圈组列表</router-link></li>
				<li class="gap">&gt;</li>
			</template>
			<li>成员查看</li>
		</nav-header>
		<div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width">
						<el-input v-model="keyword" clearable placeholder="搜索成员名字" @clear="getMembers" @keyup.enter.native="getMembers"></el-input>
                    </div>
                    <el-button type="primary" @click="getMembers">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="primary" @click="memeberVisible=true">新增成员</el-button>
                </div>
            </div>
			<div class="zh-table-contents">
                <el-table   
                :data="memberData"
                border
                style="width: 100%">
                    <el-table-column
                        prop="user_name"
                        label="教师"
                        align="center"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        prop="user_number"
                        label="账号"
                        align="center"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        prop="group_org_name[0]"
                        label="组织架构"
                        align="center"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                        <el-table-column
                        prop="resource_count"
                        label="上传教案"
                        align="center"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        prop="chat_count"
                        label="发布帖子"
                        align="center"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        prop="comment_count"
                        label="评论数"
                        align="center"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="操作"
                    >
                        <template slot-scope="scope">
                            <el-button @click="delMember(scope.row)" class="delete-button" type="text">退出</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination" v-if="total_number > 10">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="listParam.page_index"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="listParam.page_size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total_number">
                    </el-pagination>
                    <div class="pagination-button">
                        <el-button 
                            @click="getMembers"
                            type="primary" icon="el-icon-refresh" 
                            circle title="刷新数据" size="mini" >
                        </el-button>
                    </div>
                </div>
            </div>
		</div>
        <!-- 选择成员弹窗 -->
		<el-dialog title="选择成员" class="multi-dialog" :visible.sync="memeberVisible" >
            <orgTree ref="organization"></orgTree>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="memeberVisible=false">取消</el-button>
                <el-button size="small" type="primary" @click="sureMemeber">确定</el-button>
            </span>
		</el-dialog>
	</div>
</template>
<script>
    import orgTree from "@/components/common/organization-tree";
	export default{
        components: {
            orgTree
        },
		data() {
			return {
				loading:{
					status:false,
					txt:'获取数据...'
				},
				memberData:[],
				listParam:{
		       		group_id:this.$route.params.id,
		       		data_type:2,
		       		page_index:1,
                    page_size:10,
				},
				total_number:0,
                keyword:"",
                org:[],//数组，索引0的值：平台id（教育局/学校的id）；索引1的值:年级id；索引2的值:科目id；
                orgData:[],
                memeberVisible:false,
			}
        },
		created(){
            this.getMembers();
            this.getOrg();
		},
		watch: {
            org:{
                handler(newVal) {
                    this.getMembers();
                },deep:true
            }
		},
		methods: {
			getMembers(){
				this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.memberData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})

            	let params = {
            		group_id:this.listParam.group_id,
		       		data_type:this.listParam.data_type,
            		page:this.listParam.page_index,
                    size: this.listParam.page_size,
                    status:1,//成员状态  1 正常   3 成员退出待审核列表
                    platform_id: this.org[0],
                    org_id: this.org[2]?this.org[2]:(this.org[1]?this.org[1]:''),
                    keyword:this.keyword
            	}
            	this.$ajax.get('api/group/group_user_list',{params: params,func:{success:success}})
            },
            reset(){
                this.org = []
                this.keyword = ''
                this.getMembers();
            },
             handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getMembers()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getMembers();
            },
            // 退出
			delMember(obj){
				let yes = ( data => {
					this.sureDel(obj);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'您确定要把此成员退出吗？'});
			},
			sureDel(obj){
                let params = {
                    user_id:obj.user_id,
                    group_id:obj.group_id,
                    exit_type: 1,
                }
				let success = ( data => {
						this.refusalVisible = false;
			    		this.$message.success(data.msg);
						this.getMembers();
					});
		    	this.$ajax.delete('api/group/group_user_list',{params:params,func:{success:success}})
            },
            // 获取学校-年级-班级
            getOrg(){
                this.orgData = [];
                let success = res => {
                    this.orgData.push(res.data);
                };
            	this.$ajax.get('api/network/get_org_subject',{params: {app_code:sessionStorage.getItem('CheckSchoolAppCode')},func:{success:success}})
            },
            sureMemeber(){
                this.memeberVisible = false;
                let params = {
                    group_id: this.$route.params.id,
                    join_user: this.$refs.organization.checkedIds
                }
                let success = res => {
                    this.getMembers();
                    this.$message.success(res.msg);
                    // 初始化弹窗里数据
                    this.$refs.organization.getData();
                    this.$refs.organization.checkedIds = "";
                    this.$refs.organization.checkedData = [];
                };
                let fail = res => {}
				this.$ajax.post('api/group/add_group_user',params,{func:{success:success,fail:fail}})
            },
		}
	}
</script>

<style lang="scss">
	.check-members{
        .search-row{
            .el-cascader{
                width: 90%;
            }
            .el-input{
                width: 95%;
            }
        }
        .add-col{
            text-align: right;
        }
        .el-table{
			margin-top: 30px;
		}
	}


</style>